<template>
  <div>
    <p>axios使用示例</p>
    <button @click="getData">发请求</button>
    <p>歌曲名：{{ name }}</p>
    <img :src="url" alt="" />
    <hr />
    <button @click="getMenu">get menu</button>
    <button @click="addMenu">add menu</button>
    <button @click="addMenuTree">add menuTree</button>
    <!-- npm i qs。qs的作用：序列化post请求的参数，方便后台获取 -->
    <button @click="getAllData">并发</button>
    <hr />
    <button @click="myGet1">封装-get</button>
    <button @click="myPost1">封装-post</button>
    <hr>
    <button @click="getList">封装-获取菜单</button>
  </div>
</template>

<script>
// 导入qs,用来处理post的参数
import qs from "qs";
// 导入自己封装的get和post
import { myGet, myPost } from "../http";
// 导入封装的接口
import {getMenuList} from '../api'
export default {
  data() {
    return {
      name: "",
      url: "",
    };
  },
  created() {
    // this.getData();
  },
  methods: {
    // 获取菜单-get请求
    getMenu() {
      this.http
        .get("/menulist")
        // 接口的前缀如果省略，就会以页面所在地址为前缀
        // 如果没有省略，就以固定的地址为前缀
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 带有参数的get请求
    addMenuTree() {
      // 第一个带参数的方式：地址?参数1&参数2&参数3&参数4
      // this.http.get('/menulist?istree=1')
      // 第二个带参数的方式，对象套着对象
      this.http
        .get("/menulist", {
          params: {
            istree: 1,
          },
        })
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 添加菜单-post
    addMenu() {
      let obj = {
        // 随意写两条数据，故意不能成功添加，避免污染数据
        pid: "305896",
        title: "selhkrjg",
      };
      // 序列化，这个参数才是需要传给后台的
      let obj2 = qs.stringify(obj);
      console.log(obj2);
      this.http
        .post("/menuadd", obj2)
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getData() {
      this.http
        .get(
          "https://api.imjad.cn/cloudmusic/?type=detail&id=28012031&br=128000"
        )
        .then((res) => {
          console.log(res);
          this.name = res.songs[0].alia[0];
          this.url = res.songs[0].al.picUrl;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    req1() {
      return this.http.get("/menulist");
    },
    req2() {
      return this.http.get("/menulist?istree=1");
    },
    // ！！！  配置之后的axios实例没有all()方法 ！！！可以使用原生axios解决这个问题
    getAllData() {
      // 同时发出多个请求，等所有的请求都返回-all()
      // 同时发出多个请求，等最早返回的请求-race()
      // ！！！  配置之后的axios实例没有all()方法 ！！！
      this.http
        .all([this.req1(), this.req2()])
        // spread 拆分，分割。将返回的结果拆成多个部分，分别对应前面的多个请求
        .then(
          this.http.spread((res1, res2) => {
            console.log(res1);
            console.log(res2);
          })
        );
    },
    myGet1() {
      // 封装过后的get请求
      myGet("/menulist")
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    myPost1() {
      myPost("menuadd", { title: "aeerlougi" })
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    async getList() {
      let res = await getMenuList();
      console.log(res);
    }
  },
};
</script>

<style>
</style>